<script setup>
import { getWordDetailedAPI } from '@/api/worddetailed.js'
import {
  VideoPlay
} from '@element-plus/icons-vue'
import { ref } from 'vue'

import { useRoute } from 'vue-router'
const route = useRoute()
const props = defineProps({
  Word_id: Number
})

const id = route.params.key || props.Word_id // 获得动态路由参数传递的id 如果没有就用传递过来的id
const WordData = ref({}) // 存单词详细
const getWordData = async () => {
  WordData.value = await getWordDetailedAPI(id)
  // console.log(WordData.value);
}
getWordData()


// 实现播放音频
const audio = ref(); // 获取英式元素
const audio2 = ref();// 获取美式元素
const audio3 = ref(); // 获取例句元素
// 传入参数进行动态赋值，这样就不用多写几个函数了
const plays = (item, src) => {
  if (item) {
    item.src = src
    item.play();
  }
};

</script>

<template>
  <div class="parent">
    <div class="container">
      <audio ref="audio">
        <source src="" type="audio/ogg" />
      </audio>
      <div class="box">
        <h1>{{ WordData.word }}</h1>
        <div class="item" @click="plays(audio, WordData.uk_phonetic_audio)">
          <span>英</span>
          <span class="yb">/{{ WordData.uk_phonetic }}/</span>
          <el-icon color="#5bbe9e">
            <VideoPlay />
          </el-icon>
        </div>
        <audio ref="audio2">
          <source src="" type="audio/ogg" />
        </audio>
        <div class="item" style="margin-left: 10px;" @click="plays(audio2, WordData.us_phonetic_audio)">
          <span>美</span>
          <span class="yb">/{{ WordData.us_phonetic }}/</span>
          <el-icon color="#5bbe9e">
            <VideoPlay />
          </el-icon>
        </div>
      </div>
      <p style="margin-top: 10px;" v-for="(item, index) in WordData.explains" :key="index">{{ item.pos + item.trans }}
      </p>
      <audio ref="audio3">
        <source src="" type="audio/ogg" />
      </audio>
      <div style="display: flex; justify-content: space-between;  margin: 20px 0;">
        <h4>例句</h4>
        <el-icon color="#5bbe9e" @click="plays(audio3, WordData.example_audio)" style="cursor:pointer;">
          <VideoPlay />
        </el-icon>
      </div>
      <p>{{ WordData.example_en }}</p>
      <p style="margin: 10px 0;">{{ WordData.example_zh }}</p>
      <p>
        {{ WordData.example_dict }}
      </p>

      <!-- 默认插槽 -->
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.parent {
  position: relative;
  width: 100%;
  height: 89vh;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;

  .container {
    padding: 20px;
    grid-area: 1 / 2 / 5 / 5;

    .box {
      display: flex;

      h1 {
        position: absolute
      }

      .item {
        display: flex;
        align-items: center;
        background: #dddddd;
        width: fit-content; //自适应盒子里面的元素大小
        height: 30px;
        border-radius: 20px;
        padding: 10px;
        margin: 50px 0 20px 0;
        cursor: pointer;

        .yb {
          padding: 0 10px 0 10px;
        }
      }
    }
  }
}
</style>
